<template>
	<d2-container v-show="detailedShow">
		<div slot="header" >
			<div>
				<el-link type="primary" @click="detailedShow = false">
					<i class="el-icon-back"></i>
					返回
				</el-link>
				<span style="margin-left: 15px;">消费明细</span>
				
			</div>
			<div style="padding-left: 60px;">
				<el-row :gutter="18">
					<el-col :span="6">
					  <div class="grid-content bg-purple"><span>共充值：{{jiLu.chongzhi}}</span></div>
					</el-col>
				  <el-col :span="6"><div class="grid-content bg-purple"><span>共退款：{{jiLu.tuikuan}}</span></div></el-col>
				  <el-col :span="6"><div class="grid-content bg-purple"></div>共消费：{{jiLu.xiaofei}}</el-col>
				</el-row>
			</div>
		</div>
		<div>
			<template>
				<el-table  stripe style="width: 100%" border :data="userDetailed">
					<el-table-column type="index" width="50" label="序号"></el-table-column>
					<el-table-column prop="created_at" label="时间" ></el-table-column>
					<el-table-column prop="order_sn" label="订单号" ></el-table-column>
					<el-table-column prop="price" label="金额" ></el-table-column>
					<el-table-column prop="des" label="备注" ></el-table-column>
					<el-table-column label="消费类型">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.type==1">充值</el-tag>
							<el-tag type="success" v-if="scope.row.type==2">消费</el-tag>
							<el-tag type="danger"  v-if="scope.row.type==3">退款</el-tag>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<!-- 分页 -->
		<template slot="footer">
			<el-pagination
				@current-change="handleCurrentChange"
				:current-page="page.current"
				layout="total, prev, pager, next, jumper"
				:total="page.total"
				:page-size="page.size"
			></el-pagination>
		</template>
	</d2-container>
</template>

<script>
	import {postUserLog} from '@/api/api'
	export default{
		props:{
			value:Boolean,
			userid:Number
		},
		data(){
			return{
				detailedShow:false,
				userDetailed:[],
				jiLu:{},
				page: {
					//分页
					total: 20,
					current: 1,
					size: 10
				},
			}
		},
		watch:{
			value(val){
				if(val){
					this.detailedShow=val;
				}
			},
			detailedShow(val){
				if(val){
					this.getUserCon()
				}else{
					this.$emit('input',val)
				}
			}
		},
		methods:{
			getUserCon(){
				postUserLog({userid:this.userid}).then(res=>{
					if(res.state==0){
						this.jiLu=res.data
						this.userDetailed=res.data.list.data;
						this.page.size=res.data.list.per_page;
						this.page.total=res.data.list.total
					}
						
				})
			},
			//分页
			handleCurrentChange(val) {
				this.page.current = val;
				this.getUserCon();
			},
		},
		
	}
</script>

<style>
</style>
